<script setup lang="ts">
import { ElNotification } from "element-plus";
import { Search, Plus, Grid } from "@element-plus/icons-vue";
import { computed, onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
import moment from "moment";
import { getHolidaysInfo, syncHolidaysInfo } from "@/api/holidays";
import VChart from "@/views/monitor/server/components/VChart.vue";
import { useAppStoreHook } from "@/store/modules/app";
const { getScreenSize } = useAppStoreHook();
const bigScreen = computed(() => {
  if (getScreenSize.width <= 1920) {
    return false;
  } else {
    return true;
  }
});
const loading = ref(false);
const showType = ref(true);
let dateList = [];
const queryForm = reactive({
  data: {
    year: moment().format("YYYY")
  }
});
const syncForm = reactive({
  data: {
    target: undefined,
    year: undefined
  }
});
const getTooltip = () => {
  return {
    show: true,
    formatter: function (params) {
      return (
        params.value[0] +
        ": " +
        (params.value[2] ? params.value[2] : "") +
        " " +
        params.value[3]
      );
      return "1";
    }
  };
};
const getCalendar = (range, top, right, bottom, left) => {
  return [
    {
      left: left ? left : "20%",
      right: right ? right : "1",
      // top: 'middle',
      top: top ? top : "60",
      bottom: bottom ? bottom : "20",
      orient: "vertical",
      yearLabel: {
        show: false,
        nameMap: "ZH"
        // margin: 40
      },
      monthLabel: {
        nameMap: "ZH"
        // margin: 20
      },
      dayLabel: {
        firstDay: 1,
        nameMap: "ZH"
      },
      // cellSize: 40,
      range: range,
      silent: false,
      zlevel: 0
    }
  ];
};
const getCalendarAll = range => {
  return [
    {
      left: "60",
      right: "20",
      top: "20%",
      bottom: "20%",
      orient: "horizontal",
      yearLabel: {
        show: false,
        nameMap: "ZH"
        // margin: 40
      },
      monthLabel: {
        nameMap: "ZH"
        // margin: 20
      },
      dayLabel: {
        firstDay: 1,
        nameMap: "ZH"
      },
      // cellSize: 40,
      range: range,
      silent: false
    }
  ];
};
const getSeries = data => {
  return [
    // {
    //   type: "scatter",
    //   coordinateSystem: "calendar",
    //   symbolSize: 0,
    //   label: {
    //     show: true,
    //     // position: ['50%', '50%'],
    //     formatter: function (params) {
    //       var d = echarts.number.parseDate(params.value[0]);
    //       return d.getDate();
    //     },
    //     color: "#000"
    //   },
    //   data: data,
    //   silent: false
    // },
    // {
    //   type: "scatter",
    //   coordinateSystem: "calendar",
    //   symbolSize: 0,
    //   label: {
    //     show: true,
    //     offset: [0, 12],
    //     formatter: function (params) {
    //       return params.value[2] ? params.value[2] : "";
    //     },
    //     fontSize: 8,
    //     color: "#a00"
    //   },
    //   data: data,
    //   silent: false
    // },
    // {
    //   type: "scatter",
    //   coordinateSystem: "calendar",
    //   symbolSize: 0,
    //   label: {
    //     show: true,
    //     offset: [8, -12],
    //     formatter: function (params) {
    //       return params.value[3] === "休" ? "休" : "";
    //     },
    //     fontSize: 10,
    //     fontWeight: 700,
    //     color: "#a00"
    //   },
    //   data: data,
    //   silent: false
    // },
    {
      type: "custom",
      coordinateSystem: "calendar",
      calendarIndex: 0,
      zlevel: 1,
      renderItem: function (params, api) {
        const cellPoint = api.coord(api.value(0));
        const cellWidth = params.coordSys.cellWidth;
        const cellHeight = params.coordSys.cellHeight;
        const value = api.value(0);
        // console.log(api.value(2), "sss");
        // console.log(cellPoint, 'cellPoint', echarts.format.formatTime("yyyy-MM-dd", api.value(0)))
        if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) {
          return;
        }
        if (api.value(3) === "班") {
          const group = {
            type: "group",
            children: [
              {
                type: "text",
                style: {
                  x: bigScreen.value ? cellPoint[0] - 12 : cellPoint[0] - 6,
                  y: bigScreen.value ? cellPoint[1] - 8 : cellPoint[1] - 4,
                  text: echarts.format.formatTime("dd", api.value(0)),
                  fill: "#777",
                  textFont: api.font({ fontSize: bigScreen.value ? 20 : 10 })
                }
              }
            ]
          };
          return group;
        } else {
          const group = {
            type: "group",
            children: [
              {
                type: "circle",
                x: 0,
                shape: {
                  cx: cellPoint[0],
                  cy: cellPoint[1],
                  r: cellWidth / 2 - 6
                },
                enterFrom: {
                  // 淡入
                  style: { opacity: 0 },
                  // 从左飞入
                  x: -10
                },
                style: api.style()
              },
              {
                type: "text",
                style: {
                  x: bigScreen.value ? cellPoint[0] - 12 : cellPoint[0] - 6,
                  y: bigScreen.value ? cellPoint[1] - 8 : cellPoint[1] - 4,
                  text: echarts.format.formatTime("dd", api.value(0)),
                  fill: "#fff",
                  textFont: api.font({ fontSize: bigScreen.value ? 20 : 10 })
                }
              },
              {
                type: "text",
                style: {
                  x: cellPoint[0],
                  y: bigScreen.value
                    ? cellPoint[1] - (cellWidth / 2 - 2) - 12
                    : cellPoint[1] - (cellWidth / 2 - 2) - 4,
                  text: api.value(3),
                  fill: "#009edb",
                  textFont: api.font({ fontSize: bigScreen.value ? 20 : 10 })
                }
              },
              {
                type: "text",
                style: {
                  x: bigScreen.value
                    ? api.value(2).length === 2
                      ? cellPoint[0] - 18
                      : cellPoint[0] - 24
                    : api.value(2).length === 2
                      ? cellPoint[0] - 9
                      : cellPoint[0] - 13,
                  y: bigScreen.value
                    ? cellPoint[1] + (cellWidth / 2 - 2) + 4
                    : cellPoint[1] + (cellWidth / 2 - 2),
                  text: api.value(2),
                  fill: "#009edb",
                  textFont: api.font({ fontSize: bigScreen.value ? 18 : 9 })
                }
              }
            ]
          };
          return group;
        }
      },
      dimensions: [undefined, { type: "ordinal" }],
      data: data
    }
  ];
};
const syncData = async () => {
  if (syncForm.data.year) {
    await syncHolidaysInfo({ ...syncForm.data });
    ElNotification({
      type: "success",
      title: "系统提示",
      message: "系统正在同步该年数据"
    });
  } else {
    ElNotification({
      type: "warning",
      title: "系统提示",
      message: "请输入想同步的目标年份"
    });
  }
};
const all = reactive({
  data: new Array(12).fill(1).map((item, index) => {
    let z = {
      color: ["#009edb"],
      tooltip: getTooltip(),
      calendar: getCalendar(
        queryForm.data.year +
          `-${index + 1 > 9 ? index + 1 : "0" + (index + 1)}`
      ),
      series: getSeries([])
    };
    return z;
  })
});
const options = reactive({
  data: {
    color: ["#009edb"],
    tooltip: getTooltip(),
    calendar: getCalendarAll(queryForm.data.year),
    series: getSeries([])
  }
});
const search = async () => {
  loading.value = true;
  let year = moment().format("YYYY");
  if (queryForm.data.year) {
    year = queryForm.data.year;
  }
  let res = await getHolidaysInfo({ year: year });
  if (!res.length) {
    ElNotification({
      type: "warning",
      title: "系统提示",
      message: "请先同步该年数据"
    });
    loading.value = false;
    return;
  }
  tableData.data = res;
  dateList = res.map(item => {
    return [item.date, item.festivalName || "", item.isOffDay ? "休" : "班"];
  });
  all.data.forEach((item, index) => {
    item.calendar = getCalendar(
      queryForm.data.year + `-${index + 1 > 9 ? index + 1 : "0" + (index + 1)}`
    );
    let lData = [];
    for (let i = 0; i < dateList.length; i++) {
      lData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);
    }
    item.series[0].data = lData;
    // item.series[1].data = lData;
    // item.series[2].data = lData;
    // item.series[3].data = lData;
  });
  let lData = [];
  for (let i = 0; i < dateList.length; i++) {
    lData.push([dateList[i][0], 1, dateList[i][1], dateList[i][2]]);
  }
  options.data = {
    color: ["#009edb"],
    tooltip: getTooltip(),
    calendar: getCalendarAll(queryForm.data.year),
    series: getSeries(lData)
  };
  loading.value = false;
};
const tableData = reactive({
  data: []
});
const disabledTime = e => {
  return e.getTime() > new Date().getTime();
};
onMounted(() => {
  search();
});
</script>

<template>
  <div class="main h-[calc(100%-29px)]">
    <el-card v-loading="loading" class="w-full my-card-full">
      <div class="flex justify-between">
        <div class="flex">
          <el-form :inline="true" :model="queryForm.data" label-width="0px">
            <el-form-item>
              <!--            <el-input-->
              <!--              v-model="queryForm.data.year"-->
              <!--              placeholder="请输入所属年份查询"-->
              <!--            />-->
              <el-date-picker
                v-model="queryForm.data.year"
                :disabled-date="disabledTime"
                type="year"
                placeholder="请选择年份"
                value-format="YYYY"
                date-format="YYYY"
                :size="'default'"
              />
            </el-form-item>
            <el-form-item class="ml-[10px]">
              <el-button type="primary" :icon="Search" @click="search"
                >查询</el-button
              >
              <!--              <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>-->
            </el-form-item>
          </el-form>
          <el-form :inline="true" :model="syncForm.data" label-width="0px">
            <el-form-item>
              <el-input
                v-model="syncForm.data.target"
                placeholder="请输入同步目标地址"
              />
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="syncForm.data.year"
                :disabled-date="disabledTime"
                type="year"
                placeholder="请选择年份"
                value-format="YYYY"
                date-format="YYYY"
                :size="'default'"
              />
            </el-form-item>
            <el-form-item class="ml-[10px]">
              <el-button type="primary" :icon="Plus" @click="syncData"
                >同步</el-button
              >
              <!--              <el-button :icon="RefreshLeft" @click="resetQuery">重置</el-button>-->
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button-group>
            <el-button
              type="primary"
              :icon="Grid"
              @click="showType = !showType"
            />
          </el-button-group>
        </div>
      </div>
      <div class="echarts">
        <div v-if="showType" class="w-full h-1/2 flex">
          <div v-for="citem in 6" :key="citem" class="w-1/6 h-full">
            <v-chart :options="all.data[citem - 1]" />
          </div>
        </div>
        <div v-if="showType" class="w-full h-1/2 flex">
          <div v-for="citem in 6" :key="citem" class="w-1/6 h-full">
            <v-chart :options="all.data[citem - 1 + 6]" />
          </div>
        </div>
        <v-chart v-if="!showType" :options="options.data" />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.my-card-full {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .echarts {
      flex: 1;
    }
  }
}
</style>
